<script setup lang="ts">
import {type RouteLocationRaw} from 'vue-router';
import LinkStatus from './status.vue';

interface Props {
  title?: string;
  list?: any[];
}

const {
  title, list
} = defineProps<Props>();

const emit = defineEmits(['click']);

const MAX_SIZE = 12;

let maxCount = $ref(MAX_SIZE);

const {go} = useRouterHelper();

const handleJump = (path: RouteLocationRaw) => {
  go(path);
  emit('click', path);
};

const showMore = computed(() => {
  return list!.length > maxCount && maxCount > 0;
});

const handleMore = () => {
  if (showMore.value) {
    maxCount = -1;
  } else {
    maxCount = MAX_SIZE;
  }
};

const itemStyle = computed(() => {
  return {
    'grid-template-rows': `repeat(${list!.length}, auto)`
  };
});
</script>

<template>
  <div v-if="list?.length" :class="['content-col-item', {'mt-40px': false}]">
    <span class="item-title">{{ title }}</span>
    <div class="item-content-wrapper">
      <ul class="item-content" :style="itemStyle">
        <li class="item"
            v-for="(item, index) in list?.slice(0, maxCount)" :key="index">
        <span :class="['item-con']"
              @click="handleJump(item.url)">
          <span class="text" :class="{disabled:!item.url}">{{ item.fullName || item.name }}</span>
          <link-status
            v-if="item?.functionLabel"
            :color="item?.functionLabel?.color"
            :bgColor="item?.functionLabel?.bgColor"
            :name="item?.functionLabel?.name"
          />
        </span>
        </li>
        <!--        <li v-if="list.length > maxCount" class="more">-->
        <!--          <span class="text" @click="handleMore">{{ showMore ? '更多' : '收缩' }}</span>-->
        <!--        </li>-->
      </ul>
      <ul class="item-content ml-20px" :style="itemStyle" v-if="list.length > maxCount">
        <li class="item"
            v-for="(item, index) in list?.slice(maxCount, list.length)" :key="index">
        <span :class="['item-con']"
              @click="handleJump(item.url)">
          <span class="text">{{ item.fullName || item.name }}</span>
          <link-status
            v-if="item?.functionLabel"
            :color="item?.functionLabel?.color"
            :bgColor="item?.functionLabel?.bgColor"
            :name="item?.functionLabel?.name"
          />
        </span>
        </li>
      </ul>
    </div>
  </div>
</template>
